<template>
  <view class="deep">
    <view class="bg-white w-100 z-222 seach">
      <view class="d-flex pb-3 j-center a-center">
        <view class=" bg-light-secondary span-18 rounded-50 d-flex py-1 ">
          <u-icon name="search" color="#888888" size="33" class="mx-2"></u-icon>
          <input class="ml-2" type="text" placeholder="搜索商品名称" @click="sendSeach" focus disabled="true" />
        </view>
      </view>
      <view class="" v-if="userinfo.is_merchant">
        <u-tabs-swiper ref="uTabs" active-color="#ff0000" bar-width="80" :list="todatList" :current="current"
          @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
      </view>
      <view class="" v-if="!userinfo.is_merchant">
        <u-tabs-swiper ref="uTabs" active-color="#ff0000" bar-width="80" :list="todat_list" :current="current"
          @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
      </view>
    </view>
    <view class="">
      <view class="mt-5" v-if="u_loadmore">
        <u-loadmore status="loading" icon-type="circle" />
      </view>
      <view class="" v-else>
        <!-- 进行中 -->
        <swiper :style="{'height':scrollHeight}" :current="swiperCurrent" @transition="transition"
          @animationfinish="animationfinish">
          <swiper-item>
            <scroll-view scroll-y="true" :style="{height: scrollHeight}" @scrolltolower="scrolltolower">
              <sale :saleList="saleList" @goodsOpen="goodsOpen" @goodsDetail="goodsDetail" :total="total"></sale>
            </scroll-view>
          </swiper-item>
          <swiper-item>
            <scroll-view scroll-y="true" :style="{height: scrollHeight}">
              <under :underList="underList" @goods_under="goods_under" @goodsDetail="goodsDetail"></under>
            </scroll-view>
          </swiper-item>
          <swiper-item>
            <scroll-view scroll-y="true" :style="{height: scrollHeight}">
              <audit :auditList="auditList" @goods_audit="goods_audit" @goodsDetail="goodsDetail"></audit>
            </scroll-view>
          </swiper-item>
          <swiper-item>
            <scroll-view scroll-y="true" :style="{height: scrollHeight}">
              <shelve :shelveList="shelveList" @goods_shelve="goods_shelve" @goodsDetail="goodsDetail"></shelve>
            </scroll-view>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <!-- 改价 -->
    <u-popup @open="open_focus" @close="close_focus" v-model="mouseShow" negative-top="200" width="90%" mode="center"
      border-radius="14" :closeable="true" close-icon="close" close-icon-pos="top-right" close-icon-size="40">
      <view class="py-2 border-bottom">
        <view class="font-md d-flex j-center a-center">快速改价</view>
      </view>
      <view class="d-flex font-md">
        <view class="goods_card_head_left position-relative m-2">
          <view v-if="items.has_product=='yes'" class="text-white goods_logo">多货品</view>
          <image class="popupImg" v-if="items.img" :src="items.img.url?items.img.url:defaltImage" mode=""></image>
        </view>
        <view class="p-3">
          <view class="font-md">现&nbsp;&nbsp;&nbsp;价:&nbsp;<text
              class="text-danger ml-1 font-md">{{items.shop_price}}</text></view>
          <view class="d-flex pt-3">
            <view class="font-md nowrap">调整至:</view>
            <view class="d-flex bg-light-secondary py-1 rounded-10 font-md ml-2"><input type="digit" focus
                :focus="firstFocus" @focus="change_input" class="text-center" placeholder-class="text-center"
                v-model="changePrice" @input="changeInput" /></view>
          </view>
        </view>
      </view>
      <button type="warn" class="pupup" @click="ConfirmPrice">确认</button>
      <view class="text-center text-primary py-3" @click="expert">高级改价</view>
    </u-popup>
    <!--下架 -->
    <u-modal v-model="downShow" title="下架提示" :show-title="false" show-confirm-button show-cancel-button
      @confirm="downFarme">
      <view class="py-3">
        <view class="text-center">你确定要把该商品下架吗?</view>
      </view>
    </u-modal>
    <!-- 智能权重 -->
    <u-popup v-model="weightShow" width="90%" mode="center" border-radius="14" :closeable="true" close-icon="close"
      close-icon-pos="top-right" close-icon-size="40">
      <view class="py-2 border-bottom">
        <view class="font-lg d-flex j-center a-center">智能权重</view>
      </view>
      <view class="bg-light-secondary pb-2">
        <view class="border-bottom  d-flex pl-2">
          <view class="border-right span-10 py-1">商品购买数量</view>
          <view class="text-center span-10 py-1">0</view>
        </view>
        <view class="border-bottom d-flex pl-2">
          <view class="border-right span-10 py-1">商品退换数量</view>
          <view class="text-center span-10 py-1">{{weightList.return_number!==false?'0':weightList.return_number}}
          </view>
        </view>
        <view class="border-bottom d-flex pl-2">
          <view class="border-right span-10 py-1">购买此商品的会员数量</view>
          <view class="text-center span-10 py-1">{{weightList.user_number!==false?'0':weightList.user_number}}</view>
        </view>
        <view class="border-bottom d-flex pl-2">
          <view class="border-right span-10 py-1">对此商品评价数量</view>
          <view class="text-center span-10 py-1">
            {{weightList.goods_comment_number!==false?'0':weightList.goods_comment_number}}
          </view>
        </view>
        <view class="border-bottom d-flex pl-2">
          <view class="border-right span-10 py-1">对此商品商家评价数量</view>
          <view class="text-center span-10 py-1">
            {{weightList.merchants_comment_number!==false?'0':weightList.merchants_comment_number}}
          </view>
        </view>
        <view class="border-bottom d-flex pl-2">
          <view class="border-right span-10 py-1">会员关注此商品数量</view>
          <view class="text-center span-10 py-1">
            {{weightList.user_attention_number!==false?'0':weightList.user_attention_number}}
          </view>
        </view>
        <view class="border-bottom d-flex pl-2">
          <view class="border-right span-10 py-1">人工干预值</view>
          <view class="text-center span-10 py-1"><input value="interfere" type="text" v-model="interfere"
              @input="interfereInput" @confirm="weight" /></view>
        </view>
      </view>
    </u-popup>
    <!-- 更多 -->
    <s-popup custom-class="demo-popup" position="bottom" v-model="moreShow">
      <!-- 内容 -->
      <view class="d-flex j-center a-center">
        <view class="content span-19 rounded-20 mx-2">
          <!-- <view class="py-3 border-bottom text-center" @click="share">分享</view> -->
          <view class="py-3 border-bottom text-center" @click="goods_recycle">移至回收站</view>
          <view class="py-3 border-bottom d-flex j-center a-center" @click="is_new">
            <image class="goods_icon" v-if="items.is_new"
              :src="items.is_new?'../../static/images/goods/icon_goods_new.png':''" mode="widthFix"></image>
            <view class="ml-1">{{items.is_new?"取消":"设置"}}新品</view>
          </view>
          <view class="py-3 border-bottom d-flex j-center a-center" @click="is_hot">
            <image class="goods_icon" v-if="items.is_hot"
              :src="items.is_hot?'../../static/images/goods/icon_goods_hot.png':''" mode="widthFix"></image>
            <view class="ml-1">{{items.is_hot?"取消":"设置"}}热销</view>
          </view>
          <view class="py-3 border-bottom d-flex j-center a-center" @click="is_best">
            <image class="goods_icon" v-if="items.is_best"
              :src="items.is_best?'../../static/images/goods/icon_goods_best.png':''" mode="widthFix"></image>
            <view class="ml-1">{{items.is_best?"取消":"设置"}}精品</view>
          </view>
        </view>
      </view>
      <view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-2 rounded-25 " @click="cancelMore">
        取消
      </view>
    </s-popup>
    <!-- 商品移至回收站 -->
    <u-modal v-model="delShow" title="提示" :show-title="false" show-confirm-button show-cancel-button
      @confirm="confirm_delShow">
      <view class="py-3">
        <view class="text-center">你确定要将商品移至回收站吗？</view>
      </view>
    </u-modal>
    <!-- 分享 -->
    <s-popup custom-class="demo-popup" position="bottom" v-model="shareShow">
      <!-- 内容 -->
      <view class="m-2 bg-white rounded-20 icon_share py-2">
        <view class="border-bottom d-flex ml-4 py-4">
          <view class="text-center">
            <image src="../../static/images/goods/icon_share_wechat_timeline.png" mode=""></image>
            <view class="">朋友圈</view>
          </view>
          <view class="text-center ml-3">
            <image src="../../static/images/goods/icon_share_wechat.png" mode=""></image>
            <view class="">微信</view>
          </view>
          <view class="text-center ml-3">
            <image src="../../static/images/goods/icon_share_qq.png" mode=""></image>
            <view class="">QQ</view>
          </view>
        </view>
        <view class="d-flex ml-4 py-4">
          <view class="text-center">
            <image src="../../static/images/goods/icon_share_clipboard.png" mode=""></image>
            <view class="">复制链接</view>
          </view>
          <view class="text-center ml-3">
            <image src="../../static/images/goods/icon_share_qrcode.png" mode=""></image>
            <view class="">二维码</view>
          </view>
        </view>
      </view>
      <view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-1 rounded-25" @click="cancelShare">
        取消
      </view>
    </s-popup>
    <!-- 新品 -->
    <u-modal v-model="is_newShow" title="提示" :show-title="false" show-confirm-button show-cancel-button
      @confirm="confirm_is_new">
      <view class="py-3">
        <view class="text-center">你确定要把选中的商品{{items.is_new?'取消':'设置'}}新品吗?</view>
      </view>
    </u-modal>
    <!-- 热销 -->
    <u-modal v-model="is_hotShow" title="提示" :show-title="false" show-confirm-button show-cancel-button
      @confirm="confirm_is_hotShow">
      <view class="py-3">
        <view class="text-center">你确定要把选中的商品{{items.is_hot?'取消':'设置'}}热销吗?</view>
      </view>
    </u-modal>
    <!-- 精品 -->
    <u-modal v-model="is_bestShow" title="提示" :show-title="false" show-confirm-button show-cancel-button
      @confirm="confirm_is_bestShow">
      <view class="py-3">
        <view class="text-center">你确定要把选中的商品{{items.is_best?'取消':'设置'}}精品吗?</view>
      </view>
    </u-modal>
    <!-- 上架 -->
    <u-modal v-model="getupShow" title="上架提示" :show-title="false" show-confirm-button show-cancel-button
      @confirm="getupFarme">
      <view class="py-3">
        <view class="text-center">你确定要把该商品上架吗?</view>
      </view>
    </u-modal>
  </view>
</template>

<script>
  import Sale from "@/components/goods/sale.vue";
  import Shelve from "@/components/goods/shelve.vue";
  import Audit from "@/components/goods/audit.vue";
  import Under from "@/components/goods/under.vue";
  import sPopup from '@/components/s-popup/index.vue';
  const SIZE = 10
  export default {
    components: {
      Sale, // 在售
      Shelve, // 下架
      Audit, // 待审核
      Under, // 审核失败
      sPopup // 弹框
    },
    data() {
      return {
        todatList: [{
            todat_id: 1,
            name: "在售"
          },
          {
            todat_id: 2,
            name: "下架"
          },
          {
            todat_id: 3,
            name: "待审核"
          },
          {
            todat_id: 4,
            name: "审核失败"
          }
        ],
        todat_list: [{
            todat_id: 1,
            name: "在售"
          },
          {
            todat_id: 2,
            name: "下架"
          },
        ],
        current: 0, // tabs组件的current值，表示当前活动的tab选项
        swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
        scrollHeight: 0, // 屏幕高度

        goods_show: true, // 在售商品的标识符
        firstFocus: false,
        saleList: [], // 在售列表
        underList: [], // 下架
        auditList: [], // 待审核
        shelveList: [], // 审核失败
        items: {}, // 当前数据列表
        changePrice: "", // 改价调整价格
        mouseShow: false, // 改价
        downShow: false, // 下架
        weightShow: false, // 智能权重
        weightList: "", // 智能权重列表
        interfere: "", // 人工干预值
        moreShow: false, // 更多
        recycleShow: false, // 商品移至回收站
        shareShow: false, // 分享
        is_newShow: false, // 新品
        is_hotShow: false, // 热销
        is_bestShow: false, // 精品
        goods_id: "",
        getupShow: false, // 上架
        delShow: false, // 删除
        mouse_img: "", // 改价的图片
        more: 1, // 第几页
        count: 10, // 条数
        total: 0, // 总条数
        userinfo: "", // 用户信息
        u_loadmore: true, // 加载中
      }
    },
    onReady() {
      let _this = this
      uni.getSystemInfo({
        success(resu) {
          const query = uni.createSelectorQuery()
          query.select('.seach').boundingClientRect()
          console.log(resu)
          query.exec(function(res) {
            console.log(res)
            _this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
          })
        }
      })
    },
    onLoad(e) {
      this.$H.post("admin/user/userinfo").then(res => {
        this.userinfo = res.data
        this.u_loadmore = false
      })
      this.$H.post("admin/merchant/goods/list", {
        list_type: "selling",
        pagination: {
          count: this.count,
          page: this.more
        },
      }).then(res => {
        this.total = res.paginated.total
        let arr = res.data.filter(v => {
          return v.stock != 0
        })
        this.saleList = arr
        this.u_loadmore = false
      })
    },
    onShow() {

      this.$H.post("admin/merchant/goods/list", {
        list_type: "selling",
        pagination: {
          count: this.count,
          page: this.more
        }
      }).then(res => {
        let arr = res.data.filter(v => {
          return v.stock != 0
        })
        this.saleList = arr
      })
    },
    computed: {
      // 更新列表
      updataList() {
        if (this.swiperCurrent == 0) {
          this.$H.post("admin/merchant/goods/list", {
            list_type: "selling",
            pagination: {
              count: this.count,
              page: this.more
            }
          }).then(res => {
            let arr = res.data.filter(v => {
              return v.stock != 0
            })
            this.u_loadmore = false
            this.saleList = arr
          })
        } else if (this.swiperCurrent == 1) {
          this.$H.post("admin/merchant/goods/list", {
            list_type: "offsale",
          }).then(res => {
            this.underList = res.data
          })
        } else if (this.swiperCurrent == 2) {
          this.$H.post("admin/merchant/goods/list", {
            list_type: "await_check",
          }).then(res => {
            this.auditList = res.data
          })
        } else if (this.swiperCurrent == 3) {
          this.$H.post("admin/merchant/goods/list", {
            list_type: "check_refused",
          }).then(res => {
            this.shelveList = res.data
          })
        }
      },
    },
    methods: {
      // 更新列表
      updata() {
        if (this.swiperCurrent == 0) {
          this.$H.post("admin/merchant/goods/list", {
            list_type: "selling",
            pagination: {
              count: this.count,
              page: this.more
            }
          }).then(res => {
            let arr = res.data.filter(v => {
              return v.stock != 0
            })
            this.u_loadmore = false
            this.saleList = arr
          })
        } else if (this.swiperCurrent == 1) {
          this.$H.post("admin/merchant/goods/list", {
            list_type: "offsale",
          }).then(res => {
            this.underList = res.data
          })
        } else if (this.swiperCurrent == 2) {
          this.$H.post("admin/merchant/goods/list", {
            list_type: "await_check",
          }).then(res => {
            this.auditList = res.data
          })
        } else if (this.swiperCurrent == 3) {
          this.$H.post("admin/merchant/goods/list", {
            list_type: "check_refused",
          }).then(res => {
            this.shelveList = res.data
          })
        }
      },
      // tabs通知swiper切换
      tabsChange(index) {
        this.swiperCurrent = index;
      },
      // swiper-item左右移动，通知tabs的滑块跟随移动
      transition(e) {
        let dx = e.detail.dx;
        this.$refs.uTabs.setDx(dx);
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish(e) {
        let current = e.detail.current;
        this.$refs.uTabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },
      // 上拉加载数据
      getData() {
        this.$H.post("admin/merchant/goods/list", {
          list_type: "selling",
          pagination: {
            count: this.count,
            page: this.more
          }
        }).then(res => {
          let arr = res.data.filter(v => {
            return v.stock != 0
          })
          this.saleList = arr
          console.log(arr)
        })
      },
      // 搜索
      sendSeach() {
        uni.navigateTo({
          url: "/pages/goods-seach/goods-seach?goods_show=" + JSON.stringify(this.goods_show)
        })
      },
      // 商品详情
      goodsDetail(item) {
        uni.navigateTo({
          url: "/pages/goods-edit/goods-edit?goods_id=" + item.goods_id
        })
      },
      // 操作按钮
      goodsOpen(goodsItem, item) {
        this.items = item
        if (goodsItem.title == '改价') {
          this.mouseShow = true
          this.mouse_img = item.img.url
        } else if (goodsItem.title == '下架') {
          this.downShow = true
        } else if (goodsItem.title == '智能权重') {
          this.$H.post("admin/merchant/goods/intelligentWeight", {
            goods_id: item.goods_id
          }).then(res => {
            this.weightList = res.data
            console.log(res.data)
          })
          this.weightShow = true
        } else if (goodsItem.title == '更多') {
          this.moreShow = true
        }
      },
      // 调整价钱输入框
      changeInput(e) {
        this.changePrice = e.detail.value
        console.log(e)
      },
      // 确认修改
      ConfirmPrice() {
        this.$H.post("admin/merchant/goods/price/updateShopPrice", {
          goods_id: this.items.goods_id,
          price: this.changePrice
        }).then(res => {
          console.log(res)
          this.mouseShow = false
          this.updata()
        })
      },
      // 改价 弹框聚焦
      change_input(e) {
        console.log(e)
        this.firstFocus = true
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        });
      },
      // 关闭弹框
      close_focus() {
        this.firstFocus = false
      },
      open_focus() {
        this.change_input()
      },
      // 高级改价
      expert() {
        this.mouseShow = false
        uni.navigateTo({
          url: "/pages/goods-edit-expert/goods-edit-expert?goods_id=" + this.items.goods_id
        })
      },
      // 下架
      downFarme() {
        this.$H.post("admin/goods/toggle/sale", {
          id: this.items.goods_id,
          type: 'offline'
        }).then(res => {
          console.log(res)
          this.updata()
        })
      },
      // 智能权重 人工干预值
      weight() {
        this.$H.post("admin/merchant/goods/sort/update", {
          goods_id: this.items.goods_id,
          sort_order: this.interfere
        }).then(res => {
          console.log(res)
          this.updata()
        })
      },
      // 监听人工干预值框
      interfereInput(e) {
        this.interfere = e.detail.value
      },
      // 商品移至回收站
      goods_recycle() {
        this.delShow = true
        this.moreShow = false
      },
      // 确认移至回收站
      confirm_delShow() {
        this.$H.post("admin/goods/trash", {
          id: this.items.goods_id
        }).then(res => {
          this.updata()
        })
      },
      // 分享
      share() {
        this.shareShow = true
        this.moreShow = false
      },
      // 取消分享
      cancelShare() {
        this.shareShow = false
      },
      // 关闭更多
      cancelMore() {
        this.moreShow = false
      },
      // 设置 新品
      is_new() {
        this.is_newShow = true
        this.moreShow = false
      },
      confirm_is_new() {
        if (this.items.is_new == 0) {
          this.$H.post("admin/goods/toggle/suggest", {
            id: this.items.goods_id,
            type: 'new',
            is_suggest: 1
          }).then(res => {
            this.updata()
          })
        } else {
          this.$H.post("admin/goods/toggle/suggest", {
            id: this.items.goods_id,
            type: 'new',
            is_suggest: 0
          }).then(res => {
            this.updata()
          })
        }
      },
      // 设置热销 
      is_hot() {
        this.is_hotShow = true
        this.moreShow = false
      },
      confirm_is_hotShow() {
        if (this.items.is_hot == 0) {
          this.$H.post("admin/goods/toggle/suggest", {
            id: this.items.goods_id,
            type: 'hot',
            is_suggest: 1
          }).then(res => {
            console.log(res)
            this.updata()
          })
        } else {
          this.$H.post("admin/goods/toggle/suggest", {
            id: this.items.goods_id,
            type: 'hot',
            is_suggest: 0
          }).then(res => {
            console.log(res)
            this.updata()
          })
        }
      },
      // 设置精品
      is_best() {
        this.is_bestShow = true
        this.moreShow = false
      },
      confirm_is_bestShow() {
        if (this.items.is_best == 0) {
          this.$H.post("admin/goods/toggle/suggest", {
            id: this.items.goods_id,
            type: 'best',
            is_suggest: 1
          }).then(res => {
            console.log(res)
            this.updata()
          })
        } else {
          this.$H.post("admin/goods/toggle/suggest", {
            id: this.items.goods_id,
            type: 'best',
            is_suggest: 0
          }).then(res => {
            console.log(res)
            this.updata()
          })
        }
      },
      // 上架商品
      goods_under(underItem, under) {
        this.items = under
        if (underItem.title == "上架") {
          this.getupShow = true
        } else if (underItem.title == "智能权重") {
          this.$H.post("admin/merchant/goods/intelligentWeight", {
            goods_id: under.goods_id
          }).then(res => {
            console.log(res)
            this.weightList = res.data
          })
          this.weightShow = true
        } else if (underItem.title == "删除") {
          this.delShow = true
        }
      },
      // 确认上架
      getupFarme() {
        this.$H.post("admin/goods/toggle/sale", {
          id: this.items.goods_id,
          type: 'online'
        }).then(res => {
          console.log(res)
          this.updata()
        })
      },
      // 待审核
      goods_audit(goodsItem, item) {
        this.items = item
        if (goodsItem.title == "智能权重") {
          this.weightShow = true
          this.$H.post("admin/merchant/goods/intelligentWeight", {
            goods_id: item.goods_id
          }).then(res => {
            console.log(res)
            this.weightList = res.data
          })
        } else if (goodsItem.title == "删除") {
          this.delShow = true
        }
      },
      // 审核失败 
      goods_shelve(goodsItem, item) {
        this.items = item
        if (goodsItem.title == "智能权重") {
          this.weightShow = true
          this.$H.post("admin/merchant/goods/intelligentWeight", {
            goods_id: item.goods_id
          }).then(res => {
            console.log(res)
            this.weightList = res.data
          })
        } else if (goodsItem.title == "删除") {
          this.delShow = true
        }
      },
      // 上拉加载函数
      scrolltolower() {
        let that = this
        // 每次上拉加载的数据比上一次多十个
        that.count += SIZE
        if (that.saleList.length == that.total) {
          return
        } else {
          setTimeout(() => {
            that.getData()
          }, 1000)
        }
      }
    }
  }
</script>

<style>
  .active_today {
    color: #ff0000;
    border-bottom: 5rpx solid #ff0000;
  }

  .user_img {
    width: 50upx;
    height: 50upx;
    background-color: #ffd1d0;
  }

  .today_title {
    background-color: #f6efef;
  }

  .today_hot {
    width: 150upx;
    height: 150upx;
  }

  .goods_img {
    width: 100upx;
    height: 100upx;
    border-radius: 50%;
  }

  .goods_card_head_left {
    width: 200upx;
    height: 200upx;
  }

  .goods_card_head_left .img_url {
    width: 200upx;
    height: 200upx;
    border-radius: 20upx;
  }

  .goods_card_head_right image {
    width: 30upx;
    height: 30upx;
  }

  .goods_card_content_footer view {
    border: 1px solid #808080;
    padding: 8upx 30upx;
    margin-right: 10upx;
    border-radius: 30upx;
  }

  .popupImg {
    width: 170upx;
    height: 170upx;
    border-radius: 20upx;
  }

  .deep /deep/ button {
    width: 70%;
    border-radius: 50upx;
    font-size: 30upx;
    background: linear-gradient(to right, #F31E3E, #FB4F37);
  }

  .goods_icon {
    width: 30upx;
    height: 30upx;
  }

  .s-popup-mask {
    background: rgba(0, 0, 0, 0.2) !important;
  }

  .content {
    background-color: rgba(255, 255, 255, 0.96) !important;
    color: #666666;
  }

  .s-popup-wrap {
    background: rgba(204, 204, 204, 0) !important;
  }

  .icon_share view {
    color: #888;
  }

  .icon_share image {
    width: 120upx;
    height: 120upx;
  }

  .nowrap {
    white-space: nowrap;
  }

  .swiper-item {
    height: 100%;
  }
</style>
